<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <hr>
        <Head-one></Head-one>
        <parent> </parent>

    </div>
    <template id="parent">
        <div>
            <h2 ref="one">父组件 - parent</h2>
            <p>
                <input type="text" v-model="word">
            </p>
            <button @click="count++">点击修改count</button>
            <button @click="changeShow">点击切换show</button>
            <button @click="changeChild">通过 refs 去修改子组件 </button>

            <hr>
            <childone idx="2110" msg="这是一个静态的不可以改变的props" :word="word" :count="count" :show="show" ref="child">

            </childone>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone - childone - 1</h2>
            <h2>number -- {{number}}</h2>
            <h2>message -- {{message}}</h2>

            <h4>idx == {{idx}}</h4>
            <h4>msg -- {{msg}}</h4>
            <h4>word -- {{word}}</h4>
            <h4 @click="count++"> count -- {{count}}</h4>
            <div :style="{background:'pink',width:'180px',height:'180px',display:show?'block':'none'}">
                我是被父组件控制的
            </div>
        </div>
    </template>
</body>
<script>
    Vue.component("parent", {
        template: "#parent",
        components: {


        },
        mounted() {
            this.$refs.one.style.color = "red"
        },
        methods: {
            changeShow() {
                this.show = !this.show

            },
            changeChild() {
                console.log(this.$refs);
                // this.$refs.child 指向当前的组件
                this.$refs.child.number += 10;
                this.$refs.child.message = "你 今天 睡觉了吗。。。。"


            }
        },
        data() {
            return {
                word: "wh2110 - you are great",
                count: 1000,
                show: true
            }
        }
    })

    Vue.component("childone", {
        template: "#childone",
        data() {
            return {
                message: "2110 - 认真学习",
                number: 2110,


            }
        },
        props: {
            idx: String,
            msg: [String, Boolean],
            word: String,
            count: Number,
            show: Boolean
        }
    })








    const head = {
        template: "<h2>Head - Head - WH2110-daydayup</h2>"
    }
    Vue.component("HeadOne", head)

    const vm = new Vue({
        // 局部注册组件
        data: {
            title: "Vue 组件 父改子  ",
            word: 'wh2110-daydayup'
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")

</script>
<!-- 
    组件  小巧  独立  可复用
    组件系统
    组件组织关系
    1.父子组件关系
    <A>
        <B></B>
        <C></C>
    </A>
    
    2.兄弟组件关系
    <B></B>
    <C></C>

    组件之间的通信
    1.父组件访问子组件  （父组件修改子组件）
    a.props 必须动态props 父组件修改自身的变量  把变化的指传入 子组件 子组件接收动态props
    b.refs  指向这个子组件对象
    c.事件总线 （bus new Vue）
    d.events 事件 （emit  on）
    e.vuex（最后一天）

    2.子组件访问父组件

    3.兄弟组件之间的通信

    refs  this.$refs
    1.绑定到标签 指的当前的真实DOM
    2.绑定到组件 指的是当前的组件对象   直接修改组件内的变量 直接调用组件内部的函数
 -->

</html>